<template>
  <!-- 顶部占位 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- 返回按钮 -->
    <view class="back-btn" @tap="goBack">
      <text class="back-icon">←</text>
    </view>
  </view>

  <view class="container" :style="{ backgroundImage: `url(${counterStore.bg_img})` }" >
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">恋人金字塔</text>
    </view>

    <!-- 牌阵预览 -->
    <view class="pyramid-preview">
      <view class="pyramid-row top">
        <view class="preview-card">1</view>
      </view>
      <view class="pyramid-row bottom">
        <view class="preview-card">2</view>
        <view class="preview-card">3</view>
        <view class="preview-card">4</view>
      </view>
    </view>

    <!-- 牌阵说明 -->
    <view class="description" :class="{ 'show-description': showDescription }">
      <view class="desc-text">
        恋人金字塔牌阵是专为恋爱状况及问题设计，能够帮助占卜者深入了解恋爱关系中的各个方面的一种牌阵。
      </view>
      
      <view class="question-title">探问示例：</view>
      <view class="questions">
        <text v-for="(question, index) in questions" :key="index" 
              :class="{ 'fade-in': true }" 
              :style="{ animationDelay: index * 0.2 + 's' }">
          {{ question }}
        </text>
      </view>

      <view class="layout-title">牌阵说明：</view>
      <view class="layout-desc">
        <text v-for="(desc, index) in cardDescriptions" :key="index"
              :class="{ 'fade-in': true }"
              :style="{ animationDelay: (index + 4) * 0.2 + 's' }">
          {{ desc }}
        </text>
      </view>
    </view>

    <!-- 开始按钮 -->
    <view class="start-button" 
          @tap="startDraw"
          :class="{ 'button-hover': isButtonHovered }"
          @touchstart="isButtonHovered = true"
          @touchend="isButtonHovered = false">
      <text>开始抽牌</text>
      <text class="button-icon">→</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

import {useCounterStore} from '@/store/counter'

const counterStore = useCounterStore()


// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 控制描述内容的显示
const showDescription = ref(false)
const isButtonHovered = ref(false)

// 问题列表
const questions = [
  '我对恋人的真实感受是怎样的？',
  '恋人对我又是什么感觉？',
  '我们目前的感情状况稳定吗？',
  '未来我们的感情会有怎样的提升或变化？'
]

// 卡片描述
const cardDescriptions = [
  '第一张牌：代表本人态度。',
  '第二张牌：代表对方态度。',
  '第三张牌：代表目前关系。',
  '第四张牌：代表双方未来发展。'
]

// 返回上一页
const goBack = () => {
  uni.switchTab({
    url: '../index/index',
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

// 开始抽牌
const startDraw = () => {
  // 添加按钮点击效果
  isButtonHovered.value = true
  setTimeout(() => {
    isButtonHovered.value = false
    // 跳转到卡牌选择页面
    uni.navigateTo({
      url: '../card-select/card-select?count=4',
      fail: (err) => {
        console.error('跳转失败:', err)
        uni.showToast({
          title: '页面跳转失败',
          icon: 'none'
        })
      }
    })
  }, 200)
}

// 页面加载时的动画
onMounted(() => {
  console.log(counterStore.bg_img);
  setTimeout(() => {
    showDescription.value = true
  }, 100)
})
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  padding: 4vw;
  box-sizing: border-box;
  color: #fff;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  height: 12vw;
  display: flex;
  align-items: center;
}

.back-btn {
  position: relative;
  left: 4vw;
  width: 8vw;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

.back-icon {
  color: #fff;
  font-size: 4vw;
  font-weight: bold;
}

.header {
  text-align: center;
  margin: 16vw 0 6vw;
}

.title {
  font-size: 4.5vw;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(39, 186, 155, 0.3);
}

.pyramid-preview {
  margin: 6vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
}

.pyramid-row {
  display: flex;
  gap: 3vw;
}

.preview-card {
  width: 15vw;
  height: 25vw;
  background: rgba(255, 255, 255, 0.1);
  border: 0.2vw solid rgba(255, 255, 255, 0.2);
  border-radius: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
  color: rgba(255, 255, 255, 0.6);
}

.description {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3vw;
  padding: 4vw;
  margin-bottom: 6vw;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.show-description {
  opacity: 1;
  transform: translateY(0);
}

.desc-text {
  font-size: 3.2vw;
  line-height: 1.6;
  margin-bottom: 4vw;
  color: rgba(255, 255, 255, 0.9);
}

.question-title, .layout-title {
  font-size: 3.4vw;
  font-weight: bold;
  color: #27ba9b;
  margin-bottom: 2vw;
}

.questions, .layout-desc {
  display: flex;
  flex-direction: column;
  gap: 2vw;
  margin-bottom: 4vw;
}

.questions text, .layout-desc text {
  font-size: 3.2vw;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  opacity: 0;
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.start-button {
  height: 12vw;
  background: linear-gradient(90deg, #27ba9b 0%, #1f9d82 100%);
  border-radius: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3.6vw;
  font-weight: bold;
  margin: 0 4vw;
  transition: all 0.3s ease;
  gap: 2vw;
}

.button-hover {
  transform: scale(0.98);
  box-shadow: 0 0 20px rgba(39, 186, 155, 0.3);
}

.button-icon {
  font-size: 3.6vw;
  transition: transform 0.3s ease;
}

.start-button:active .button-icon {
  transform: translateX(5px);
}
</style> 